<template>
  <div class="reading-history">
    <header>
      <div class="header">
        <span class="back" @click="$router.back(-1)">
          <svg-icon icon-class="back"></svg-icon>
        </span>
        <h1>Reading History</h1>
        <span></span>
      </div>
    </header>
    <div v-if="userInfo" class="list">
      <dl
        @click="toReader('reader', item)"
        v-for="item of list.rows"
        :key="item.id"
      >
        <dt class="cover">
          <img
            :src="item.appBook.coverUrl"
            class="coverImg"
            v-default-img="defaultImg"
          />
        </dt>
        <dd>
          <div class="info">
            <h4 class="bookName ellipsis" v-text="item.appBook.bookTitle"></h4>
            <p class="author" v-text="item.appBook.authorName"></p>
            <p
              class="record"
              v-text="'Last read to chapter ' + item.cOrder"
            ></p>
            <p class="date" v-text="item.readTime + ' Read'"></p>
          </div>
          <div class="addOrRemove">
            <span
              v-if="item.appBook.isCollect"
              @click.stop="delBookToBookCase(item.bookId)"
            >
              <svg-icon icon-class="removed-bookself"></svg-icon>
            </span>
            <span v-else @click.stop="addBookToBookCase(item.bookId)">
              <svg-icon icon-class="added-bookself"></svg-icon>
            </span>
          </div>
        </dd>
      </dl>
      <ul class="pagination-box" v-show="list.pages > 1">
        <li class="pre-page">
          <mt-button @click.native="prePage">
            <svg-icon
              class="preIcon"
              icon-class="preIcon"
              slot="icon"
            ></svg-icon>
            Previous page
          </mt-button>
        </li>
        <li class="cur-total">
          <span class="current" v-text="list.current"></span>
          /
          <span class="total" v-text="list.pages"></span>
        </li>
        <li class="next-page">
          <mt-button @click.native="nextPage">
            Next page
            <svg-icon
              class="nextIcon"
              icon-class="nextIcon"
              slot="icon"
            ></svg-icon>
          </mt-button>
        </li>
      </ul>
    </div>
    <div v-else class="to-login">
      <mt-button class="login-btn" @click="toLogin">Login</mt-button>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapGetters } from "vuex";
import { Toast } from "mint-ui";
export default {
  data() {
    return {
      defaultImg: require("@/assets/images/default-cover.png"),
      list: {}, //阅读记录列表
      params: {
        pageNum: 1,
        pageSize: 20,
      },
      scrollTop: 0,
    };
  },
  components: {},
  computed: {
    ...mapGetters(["userInfo"]),
  },
  watch: {},
  created() {},
  mounted() {
    this.getUserReadRecord();
  },
  methods: {
    ...mapMutations({
      setShowPopup: "SET_SHOW_POPUP",
      setCurrentPopup: "SET_CURRENT_POPUP",
    }),
    // 上一页
    prePage() {
      if (this.list.current > 1) {
        this.params.pageNum -= 1;
        this.getUserReadRecord();
        this.backTop();
      } else {
        return;
      }
    },
    // 下一页
    nextPage() {
      if (this.list.current < this.list.pages) {
        this.params.pageNum += 1;
        this.getUserReadRecord();
        this.backTop();
      } else {
        return;
      }
    },
    // 查询用户的书籍阅读记录(分页)
    async getUserReadRecord() {
      let res = await this.$api.reader.getUserReadRecord(this.params);
      if (res.code === 1) {
        this.list = res.source;
      }
    },
    // 添加书籍到书架
    async addBookToBookCase(bookId) {
      let params = {
        bookId, //书籍id
      };
      let res = await this.$api.reader.addBookToBookCase(params);
      if (res.code === 1) {
        this.getUserReadRecord();
        Toast("Added bookself");
      } else {
        Toast(res.message ? res.message : "Fail to add");
      }
    },
    // 删除书架书籍
    async delBookToBookCase(bookId) {
      let params = {
        bookIds: bookId, //书籍id
      };
      let res = await this.$api.reader.delBookToBookCase(params);
      if (res.code === 1) {
        this.getUserReadRecord();
        Toast("Removed bookself");
      } else {
        Toast(res.message ? res.message : "Fail to remove");
      }
    },
    // 跳转阅读器
    toReader(name, item) {
      if (name === "reader") {
        this.$router.push({
          name: "reader",
          params: { id: item.bookId }, //书籍id
        });
      }
    },
    // 去登录
    toLogin() {
      this.setCurrentPopup({ currentPopup: "login" });
      this.setShowPopup(true);
    },
    // 返回顶部
    backTop() {
      let timer = setInterval(() => {
        let ispeed = Math.floor(-this.scrollTop / 5);
        document.documentElement.scrollTop = document.body.scrollTop =
          this.scrollTop + ispeed;
        if (this.scrollTop === 0) {
          clearInterval(timer);
        }
      }, 160);
    },
  },
};
</script>

<style lang="scss" scoped>
.reading-history {
  padding-bottom: 48px;
  > header {
    width: 100%;
    height: 100px;
    margin-bottom: 64px;
    .header {
      width: 100%;
      height: 100px;
      background: #fff;
      box-sizing: border-box;
      padding: 23px 15px 0 15px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: fixed;
      .back {
        .svg-icon {
          width: 56px;
          height: 56px;
        }
      }
      > h1 {
        font-size: 34px;
        color: #333333;
      }
    }
  }
  > .list {
    padding: 0 30px;
    > dl {
      width: 100%;
      height: 250px;
      margin-bottom: 48px;
      display: flex;
      dt.cover {
        img.coverImg {
          width: 188px;
          height: 250px;
          box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.2);
          border-radius: 16px;
        }
      }
      dd {
        width: 100%;
        margin-left: 24px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .info {
          width: 394px;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          h4.bookName {
            font-size: 28px;
            font-weight: 500;
            color: #333333;
            line-height: 48px;
          }
          p {
            font-size: 24px;
            color: #999999;
            line-height: 40px;
            &.record {
              color: #666666;
            }
            &.date {
              font-size: 22px;
            }
          }
        }
        .addOrRemove {
          .svg-icon {
            width: 56px;
            height: 56px;
          }
        }
      }
    }
    > .pagination-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .pre-page,
      .next-page {
        width: 208px;
        height: 58px;
        .mint-button {
          width: 100%;
          height: 100%;
          padding: 0;
          display: flex;
          align-items: center;
          justify-content: space-around;
          background: #e86472;
          border-radius: 4px;
          font-weight: 600;
          color: #fff;
          font-size: 22px;
          .mint-button-icon {
            .svg-icon {
              width: 11px;
              height: 24px;
            }
          }
        }
        &.next-page {
          .mint-button {
            flex-direction: row-reverse;
          }
        }
      }
      .cur-total {
        color: #999999;
        font-size: 20px;
      }
    }
  }
  > .to-login {
    .login-btn {
      width: 320px;
      height: 80px;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      margin: auto;
      color: #ffffff;
      font-weight: 500;
      border-radius: 20px;
      font-size: 34px;
      background: linear-gradient(90deg, #ef6a59 0%, #e25177 100%);
    }
  }
}
</style>
